گسترش قالب وردپرس Customizer Boilerplate

قسمت 3 از مجموعه سفارشی ساز تم شما را با Theme Customizer Boilerplate که به شما امکان می دهد کدهایی را که گزینه های تم شما را کنترل می کند، ساده کنید. تنها کاری که باید انجام دهید این است که مجموعه‌ای از فیلدهای گزینه را ارسال کنید و صفحه بخاری از ثبت بخش‌ها، تنظیمات و کنترل‌های Theme Customizer در پشت صحنه مراقبت می‌کند.

تاکنون، boilerplate به شما امکان می‌داد از فیلدهای نوشتاری، کادرهای تأیید، دکمه‌های رادیویی و فیلدهای انتخابی در سفارشی‌سازی تم استفاده کنید، این مقاله به شما نشان می‌دهد که چگونه می‌توانید آن را گسترش دهید.

توجه: قبل از ادامه، لطفاً آخرین نسخه WordPress Theme Customizer Boilerplate را از مخزن Github آن دانلود کنید. من از آخرین دوره آموزشی بهبودهایی در آن ایجاد کرده ام، و مهم است که کد شما به روز باشد. برای یادداشت های بیشتر در مورد تغییرات، به پست قبلی نگاهی بیندازید، اما به طور خلاصه، هنگامی که دیگ بخار را در پوشه تم خود کپی می کنید، اصلاً نیازی به ویرایش فایل های آن ندارید – تمام ویرایش ها با استفاده از فیلتر و قلاب های عمل انجام می شود.

هوکینگ به صفحه دیگ سفارشی ساز تم

چندین قلاب اکشن و فیلتر در Boilerplate Customizer Theme WordPress وجود دارد. می توانید با استفاده از add_action و add_filter توابع:

• ‘thsp_cbp_directory_uri’ – قلاب فیلتر تعریف شده در helpers.php، به شما امکان می دهد مکان Customizer Boilerplate را در پوشه تم خود تغییر دهید. به‌طور پیش‌فرض، مسیر boilerplate به این شکل است – get_template_directory_uri() . “/customizer-boilerplate” – اما اگر ترجیح می دهید آن را به یک مکان سفارشی منتقل کنید، این قلابی است که می تواند به شما کمک کند.
• “thsp_cbp_menu_link_text” – قلاب فیلتر تعریف شده در helpers.php، به شما امکان می دهد پیوند متن منو را تغییر دهید. Boilerplate پیوندی را در قسمت Appearance در داشبورد وردپرس اضافه می‌کند و به کاربران امکان می‌دهد به راحتی به Customizer Theme دسترسی داشته باشند. به‌طور پیش‌فرض، آن پیوند عبارت «سفارشی‌کننده تم» را نشان می‌دهد و می‌توانید متن را با استفاده از «thsp_cbp_menu_link_text» تغییر دهید.
• “thsp_cbp_capability” – قلاب فیلتر تعریف شده در helpers.php. به شما امکان می‌دهد قابلیت پیش‌فرض مورد نیاز مورد استفاده در روش $wp_customize->add_setting را تغییر دهید.
• “thsp_cbp_option” – قلاب فیلتر تعریف شده در helpers.php. اگر از «گزینه» در آرگومان های تنظیمات خود استفاده می کنید، از این قلاب برای تغییر نام ورودی استفاده کنید که مقادیر تنظیمات طرح زمینه شما در جدول wp_options ذخیره می شود. مقدار پیش‌فرض «thsp_cbp_theme_options» است، مطمئن شوید که به این یکی متصل شده‌اید و آن را به چیزی تغییر دهید که نام موضوع شما در آن باشد.
• ‘thsp_cbp_options_array’ – قلاب فیلتر تعریف شده در options.php، باید به آن قلاب کنید و آرایه گزینه های پیش فرض (شامل گزینه های نمونه) را با گزینه هایی که در موضوع شما استفاده می شود جایگزین کنید. این را تکرار می‌کنم، آن را پررنگ کرده و زیر آن خط‌کشی می‌کنم: Yباید به آن متصل شوید و آرایه گزینه‌های پیش‌فرض را با گزینه‌هایی جایگزین کنید که در موضوع شما استفاده می‌شود.
• ‘thsp_cbp_custom_controls’ – قلاب عمل تعریف شده در custom-controls.php، با اتصال به آن می توانید کنترل های سفارشی خود را ایجاد کنید، به خواندن ادامه دهید تا نمونه ای از نحوه انجام آن را ببینید.
• “tshp_cbp_remove_sections”، “tshp_cbp_remove_controls” و “tshp_cbp_remove_settings” – قلاب‌های فیلتر تعریف شده در customizer.php. می‌توانید آرایه‌هایی از شناسه‌های بخش داخلی (یا شناسه‌های کنترل، یا شناسه‌های تنظیمات) را برای حذف برخی از بخش‌ها، کنترل‌ها یا تنظیمات داخلی به آن‌ها ارسال کنید.

توجه: در حالی که در حال توسعه‌پذیری هستیم و قلاب‌های خود را ایجاد می‌کنیم تا سایر برنامه‌نویسان بتوانند از آنها برای گسترش کد شما استفاده کنند، نمی‌توان از اهمیت این موضوع اغراق کرد. پس از همه، وردپرس (هسته) اینگونه کار می کند. و من نتوانستم از Pippin و مقالات او برای اینکه این ایده را به ذهنم خطور کند کافی است.

کنترل های سفارشی

نسخه به‌روزرسانی شده تم سفارشی‌ساز (که همین الان بررسی کردید، درست است؟) چند کنترل دیگر دارد که می‌توانید از آنها استفاده کنید – فیلد ناحیه متنی، فیلد شماره HTML5 و فیلد تصاویر، که اساساً یک نسخه فانتزی از دکمه‌های رادیویی است.

این کنترل‌های سفارشی در custom-controls.php تعریف شده‌اند، من همه آنها را در اینجا مرور نمی‌کنم، اما اجازه دهید نگاهی به یکی (فیلد شماره HTML5) بیندازیم تا ببینیم همه آنها چگونه کار می‌کنند:

/**
 * کنترل Customizer را برای فیلد ورودی[نوع=عدد] ایجاد می کند
 *
 * @since Theme_Customizer_Boilerplate 1.0
 */
کلاس CBP_Customizer_Number_Control WP_Customize_Control را گسترش می دهد

	public $type = 'number';
	
	تابع عمومی render_content() {
		echo '
			'.  esc_html( $this->label ) .'
			link() .' value="'. intval($this->value() ) .'" />
		';
	}
	
}

همانطور که می بینید، تنها کاری که باید انجام دهید این است که کنترل جدید $type و تابع render_content آن را تعریف کنید که کنترل را در صفحه سفارشی ساز تم به بیرون می دهد.

استفاده از کنترل‌های سفارشی داخلی Customizer Boilerplate

این مانند فیلدهای ساده ای است که در آموزش قبلی پوشش داده شد، تنها چیزی که باید از آن آگاه باشید «انواع»هایی است که باید برای هر کدام از آنها استفاده کنید:

• فیلد شماره – «شماره»
• فیلد Textarea – ‘textarea’
• تصاویری که به‌عنوان دکمه‌های رادیویی عمل می‌کنند – ‘images_radio’، در اینجا نمونه‌ای از این کنترل در موضوع کازولا:

دانستن نام این انواع کنترل جدید، افزودن یکی آسان است. در اینجا نحوه اضافه کردن یک کنترل فیلد عددی به آرایه ای است که همه گزینه های شما را در خود نگه می دارد:

/*
 * =============
 * =============
 * فیلد شماره
 * =============
 * =============
 */
'new_number_field' => آرایه(
	'setting_args' => آرایه(
		'پیش فرض' => ''،
		'type' => 'گزینه',
		'capability' => $thsp_cbp_capability،
		'transport' => 'Refresh',
	)					
	'control_args' => آرایه(
		'label' => __( 'Number', 'my_theme_textdomain')
		'type' => 'number'، // کنترل Textarea
		'اولویت' => ​​8
	)
)

توجه: اگر مطمئن نیستید کجا این را اضافه کنید، بخش «استفاده از آرایه گزینه‌ها برای افزودن بخش‌ها، تنظیمات و کنترل‌های سفارشی‌ساز» را در قسمت 3 این مجموعه. همچنین، یک نمونه برای هر یک از کنترل‌های سفارشی در فایل options.php وجود دارد.

افزودن کنترل های سفارشی خود

بیایید به قلاب اقدام «thsp_cbp_custom_controls» برگردیم که قبلاً به آن اشاره کردم:

/**
 * قلاب اکشن که به شما امکان می دهد کنترل های خود را ایجاد کنید
 */
do_action('thsp_cbp_custom_controls' );

این یک قلاب اکشن وردپرس ساده است که به شما امکان می‌دهد کنترل‌های سفارشی خود را بدون تغییر فایل‌های Theme Customizer Boilerplate اضافه کنید. چرا می خواهید از ویرایش آنها اجتناب کنید؟ زیرا اگر به جای آن به boilerplate متصل می‌شوید، هر زمان که شخصی آن را به‌روزرسانی کرد، می‌توانید آخرین نسخه را بگیرید، آن را در قالب خود قرار دهید و تغییراتی را که ایجاد کرده‌اید از دست ندهید. به ویرایش فایل‌های اصلی وردپرس در مقابل نوشتن یک افزونه، ویرایش یک تم در مقابل ایجاد یک تم فرزند و غیره فکر کنید.

اگر نیاز دارید کنترل‌های سفارشی خود را اضافه کنید، به این صورت می‌توانید این کار را انجام دهید:

function my_theme_add_customizer_boilerplate_control() {
	/**
	 * ایجاد کنترل سفارشی برای استفاده با Theme Customizer Boilerplate
	 * از یک پیشوند کلاس منحصر به فرد استفاده کنید!
	 *
	 * @since Theme_Customizer_Boilerplate 1.0
	 */
	کلاس CBP_Customizer_My_Control WP_Customize_Control {
	
		public $type = 'my_type'; // این را تغییر دهید
		
		تابع عمومی render_content() {
			// خروجی کنترل اینجا می رود
		}
		
	}
}
add_action('thsp_cbp_custom_controls', 'my_theme_add_customizer_boilerplate_control' );

مطمئن شوید که کلاس کنترل سفارشی خود را با چیزی منحصر به فرد پیشوند کرده اید، بنابراین نام آن با کلاس دیگری تداخل نداشته باشد. من از «CBP_» (Customizer Boilerplate) استفاده کردم – از آنجایی که شما از boilerplate در یک موضوع استفاده می کنید، نام طرح زمینه شما بسیار منطقی است و باید برای شما خوب کار کند.

سفارشی کننده تم: بعدی چیست؟

اکنون که پلاگین سفارشی ساز قالب وردپرس از طریق قلاب ها قابل گسترش است، ما نگاهی به “گزینه های تم مشروط” می اندازیم – گزینه هایی که فقط در صورت فعال بودن یک افزونه خاص ظاهر می شوند و به شما کمک می کنند تا صفحه سفارشی ساز تم را غیرفعال نگه دارید. درهم ریخته.

نظر شما در مورد Customizer Boilerplate تاکنون چیست؟ آیا قصد دارید از آن در تم های خود استفاده کنید؟ آیا ایده ای در مورد اینکه چگونه می توان آن را بهبود بخشید؟ بازخورد شما همیشه خوش آمدید.